
<template >
 <el-card class="box-card">
    <div slot="header" style="text-align:left">
    
     </div>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" >
  <el-form-item label="企业名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>

  <el-form-item label="地区" prop="area">
      <el-cascader
        size="large"
        :options="options"
        v-model="ruleForm.areaCode"
        @change="handleChange">
    </el-cascader>
  </el-form-item>
  <el-form-item label="地址" prop="address">
    <el-input v-model="ruleForm.address" placeholder="详细如街道门牌"></el-input>
  </el-form-item>
  <el-form-item label="法人姓名" prop="legalPerson">
    <el-input v-model="ruleForm.legalPerson" placeholder="法人姓名"></el-input>
  </el-form-item>
   <el-form-item label="法人电话" prop="phone">
    <el-input v-model="ruleForm.phone" placeholder="法人电话"></el-input>
  </el-form-item>
  <el-form-item label="法人身份证" prop="idcard">
    <el-input v-model="ruleForm.idcard" placeholder="法人身份证"></el-input>
  </el-form-item>
    <el-form-item label="经营执照" prop="creditCodeImage">
        <uploadImage :maxSize=3 :maxNum=1 v-model="ruleForm.creditCodeImage" />
    </el-form-item>
   <el-form-item label="统一社会信用代码" prop="creditCode">
       <el-input v-model="ruleForm.creditCode" placeholder="统一社会信用代码"></el-input>
    </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
 </el-card>
</template>


<script>

/**
 *东阳市吴宁澜春服装店  92330783MA29QJ0F5X 
叠彩区宇凯日用品店   92450303MA5MXE8R6J 
德江县凤娟粉馆      92520626MA6GJ0T945 
郸城县世晨家庭农场   92411625MA44MN57X7 
朝阳区大鹏锡纸饭店   92220104MA14XX328N
 */
/**
 * 安装npm install element-china-area-data -S  
 * 资料https://www.npmjs.com/package/element-china-area-data
 */
import { companySearch ,companyForm,companyLoad} from "@/libs/api.js"; 
import { regionData,CodeToText } from 'element-china-area-data'
import uploadImage from "@/components/upload/UploadImage.vue";
  export default {
    components: {
        uploadImage
    },
    data() {
      return {
        options: regionData ,
        ruleForm: {
          id:"",
          name: '',
          address: '',
          legalPerson: '',
          phone: '',
          idcard: '',
          creditCode: '',
          creditCodeImage:[],
          area: [],
          areaCode:[]
        },
        rules: {
          name: [
            { required: true, message: '请填写公司名称', trigger: 'blur' },
             { min: 3, max: 50, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          area: [
            { required: true, message: '请选择公司区域', trigger: 'change' }
          ],
          address: [
            {  required: true, message: '请填详细地址', trigger: 'change' },
            { min: 3, max: 50, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          legalPerson: [
            {  required: true, message: '请填写法人姓名', trigger: 'change' },
             {
            pattern: /^[\u4E00-\u9FA5]{2,4}$/,
            message: "请输入合理中文名称",
            trigger: "blur"
          }
          ],
          phone: [
            { required: true, message: '请填写手机号', trigger: 'change' },
            {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号格式不正确或者逻辑不对",
            trigger: "blur"
          }
          ],
          idcard: [
            { required: true, message: '请填写身份证', trigger: 'change' },
             {
            pattern: /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/,
            message: "身份证格式不正确或者逻辑不对",
            trigger: "blur"
          }
          ],
          creditCode: [
            { required: true, message: '请填写统一社会代码', trigger: 'blur' },
             {
            pattern: /[0-9A-Z]{18}/,
            message: "社会代码格式不正确或者逻辑不对",
            trigger: "blur"
          }
          ],
          creditCodeImage: [
            { required: true, message: '请选择文件', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
                    let fileList = this.ruleForm.creditCodeImage;
                    let param = new FormData();
                    //封装第一步数据
                    for (var key in this.ruleForm) {
                        param.append(key, this.ruleForm[key]);
                    }
                    //封装处理图片
                    if (fileList && fileList.length > 0) {
                        let oldFiles = "";
                        for (var i = 0; i < fileList.length; i++) {
                            if (fileList[i].status != "success") {
                                param.append("file", fileList[i].raw);
                            } else {
                                oldFiles += ";" + fileList[i].name;
                            }
                         }
                         if (oldFiles.length > 0) {
                            oldFiles = oldFiles.substring(1);
                            param.append("oldFiles", oldFiles);
                        }
                    }
                    companyForm(param).then(res => {
                        this.$util.success();
                        if (fileList && fileList.length > 0) {
                        for (var i = 0; i < fileList.length; i++) {
                            fileList[i].status == "success";
                           }
                        }
                    });
           
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleChange (value) {
        if(value && value.length>0){
            this.ruleForm.area=[];
            for(var i=0;i<value.length;i++){
                this.ruleForm.area.push(CodeToText[value[i]]);
            }
        }
      }
    },
    mounted() {
       if(this.$route.query.id){
           companyLoad(this.$route.query.id).then((res) => {
                this.ruleForm=res;
                if(res.areaCode){
                   this.ruleForm.areaCode=res.areaCode.split(",");
                }
                if(res.creditCodeImage){
                    var images = res.creditCodeImage.split(";");
                    this.ruleForm.oldAllFiles= res.creditCodeImage;
                    this.ruleForm.creditCodeImage=[];
                    for (var i = 0; i < images.length; i++) {
                    var file = {
                        name: images[i],
                        url: this.$http.baseUrl + "/file/qiniu/" + images[i],
                        status:"success"
                    };
                       this.ruleForm.creditCodeImage.push(file);
                    }
                    
                }
                
            })
       }
    }
  }
</script>



